/*
定投确认页面
 */

<template>
  <div>
     <fundation-header :title="'定投'"></fundation-header>
    <div class="main">
      <div class="confirmTitle">
        <span>{{fundationInfo.companyName}}</span>
        <p>{{fundationInfo.proMoney}}元</p>
      </div>
    </div>
    <div class="tipTitle"><p>确认信息</p></div>
    <div>
      <group gutter="0">
        <cell v-for="(item,index) in planMsg" :title="item.itemName" :value="item.val" class="confirmcell" :key="index"/>
      </group>
    </div>
    <div>
      <x-button @click.native="confirmAction" plain type="primary" class="confirmBtn">确认</x-button>
    </div>

  </div>
</template>
<script>
import { Cell, Group } from 'vux'
import FundationHeader from './fundationHeader'
export default {

  components: {
    Cell,
    Group,
    FundationHeader
  },
  data () {
    return {
      fundationInfo: {
        companyName: '国泰基金管理有限公司',
        proName: '国泰民安增利债券型发起式C',
        proMoney: '5000',
        proNum: '4999.88',
        proValue: '1.0043',
        serviceCost: '3.000',
        cardNum: '6214*******9999',
        buyTime: '20180908',
        orderNum: '208747748475885755'
      },
      planMsg: [
        {itemName: '买入产品', val: '国泰民安增利债券型发起式C'},
        {itemName: '定投金额', val: '30000'},
        {itemName: '定投周期', val: '每周'},
        {itemName: '扣款日', val: '第2日'},
        {itemName: '期满条件', val: '成功基数'},
        {itemName: '期数', val: '10期'},
        {itemName: '手续费', val: '2元'},
        {itemName: '付款账号', val: '6214*******9999'},
        {itemName: '定投时间', val: '20180978'},
        {itemName: '订单号', val: '87878766908777'}
      ]
    }
  },
  methods: {
    confirmAction () {
      console.log('确认按钮')
      this.$router.push({name: 'planResult'})
    }
  }
}
</script>

<style lang="less" scoped>
    .weui-cell::before{
      border-top: 0px ;
    }
    .weui-cell:last-child::before{
        border-top: 1px solid #D9D9D9;
    }
    .weui-cell {
      padding-top: 0.3rem;
      padding-bottom: 0rem;
      font-size: 0.28rem;
      line-height: 0.28rem;
      &:last-child{
        padding-bottom:0.3rem;
      }
      &:first-child{
        padding-top: 0.44rem;
      }
      &:nth-last-child(2){
        padding-bottom:0.44rem;
      }
    }
    .confirmBtn{
      line-height:0.88rem;
      width:6.9rem;
      margin-left: 0.3rem;
      margin-top: 0.49rem;
      background: #EC1B30;
      font-size: 0.3rem;
      border-radius: 0.06rem;
      color: white;
      border-width: 0rem;
      &.forbiden{
        opacity: .5;
      }
    }
    .confirmcell{
      font-size: 0.26rem;
      color: #333;
   }
   .confirmTitle{
     height: 1.92rem;
     background: #3D477B;
     color: white;
     span{
        display: inline-block;
        margin: 0.4rem 0 0 0.31rem;
        font-size: 0.27rem;
     }
     p{
        text-align: center;
        font-size: 0.6rem;
        margin-top: 0.32rem;
        line-height: 0.6rem;
        font-family:PingFangSC-Medium;
     }
   }
   .tipTitle{
      height: 0.6rem;
      line-height: 0.6rem;
      padding-left: 0.28rem;
      font-size: 0.3rem;
      font-family: PingFangSC-Medium;
      color: rgba(51,51,51,1);
   }
</style>
<style>
    .confirmcell .vux-cell-bd{
        font-family:PingFangSC-Regular;
        color:rgba(153,153,153,1);
      }
    .confirmcell .weui-cell__ft{
      font-size:0.28rem;
      font-family:PingFangSC-Regular;
      color:rgba(51,51,51,1);
    }
</style>
